<template>
  <tr class="order-row">
    <td>{{ order.id }}</td>
    <td>{{ order.prodName }}</td>
    <td>{{ order.cusName }}</td>
    <td>{{ order.orderBuyCount }}</td>
    <td>{{ order.orderPrice }} 元</td>
    <td>{{ formatOrderDate(order.orderDate) }}</td> <!-- 修改为调用方法 -->
    <td>{{ order.orderPostman }}</td>
    <td>{{ order.orderPostage }} 元</td>
    <td>{{ order.busName }}</td>
    <td>{{ statusText }}</td>
    <td>
      <a-button type="link" @click="deleteOrder">删除</a-button>
    </td>
  </tr>
</template>

<script>
import { message } from 'ant-design-vue';
import request from '../../../util/request';
import { parseTime } from '../../../util/parseTime';

export default {
  name: 'OrdersRow',
  props: {
    order: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      statusText: '',
    }
  },
  mounted() {
    this.updateStatusText();
  },
  methods: {
    updateStatusText() {
      switch (this.order.orderStatus) {
        case 0:
          this.statusText = '未发货';
          break;
        case 1:
          this.statusText = '已发货';
          break;
        case 2:
          this.statusText = '已送达';
          break;
        case 3:
          this.statusText = '已签收';
          break;
        case 4:
          this.statusText = '申请取消';
          break;
        default:
          this.statusText = '未知状态';
      }
    },
    formatOrderDate(time) {
      return time === null ? '' : parseTime(time);
    },
    deleteOrder() {
      request.post('/order/delete', {
        orderid: this.order.id,
        role: 'admin'
      }).then(res => {
        if (res.data.flag === 'success') {
          message.success('删除成功');
          this.deleted();
        } else {
          message.error('删除失败');
        }
      }).catch(err => {
        message.error('删除失败：', err);
      });
    },
    deleted() {
      this.$emit('deleted');
    }
  },
};
</script>

<style scoped>
.order-row {
  background: rgba(50, 50, 50, 0.8); /* 暗色微透明背景 */
  transition: background 0.3s; /* 背景过渡效果 */
}

.order-row:hover {
  background: rgba(70, 70, 70, 0.9); /* 悬停时稍微加深透明度 */
}
</style>
